<template>
	<page  ref='page'>
		<!-- 账单明细 wwl-->
		<view class="page">
			<view class="info_box" v-if="detailed.total">
				<view class="row">
					<text class="">
						总收入：
					</text>
					<text class="money">
						¥{{detailed.total.recharge}}
					</text>
				</view>
				
				<view class="zhangdmx" @click='onWithdrawlist(juesetype)'>
					账单
				</view>
			</view>
			<view class="list_page" >
				<block v-if='detailed.list && detailed.list.length > 0'>
					<view class="list_box" v-for="(item,index) in detailed.list" :key='index'>
						<view class="top_box" @click="setOpenList(item.id)">
							<view class="time">
								<text>{{item.name}}</text>
								<image src="https://xiaoqu.wuguoxin.vip/uploads/web/decorationGold_bottom.png" mode="" v-if="getOpenList(item.id)"></image>
								<image src="https://xiaoqu.wuguoxin.vip/uploads/web/decorationGold_right.png" mode=""   v-else ></image>
							</view>
							<view class="detailed">
								<text>收入：{{item.amount}}</text>
								<text style="margin-left: 20rpx;" v-if="juesetype != 0">提现：{{item.low}}</text>
							</view>
						</view>
						<view class="bottom_box" v-if="getOpenList(item.id )">
							<view class="row_box" v-for='(role,ir) in item.list' :key='ir'>
								<view class="left">
									<image :src="role.users.avatar" mode="scaleToFill"></image>
								</view>
								<view class="right">
									<view class="info">
										<view class="">
											{{role.users.name}}
										</view>
										<view class="">
											{{role.type_text}}
										</view>
										<view class="">
											<text>{{role.day}}日</text> <text style="margin-left: 10rpx;">{{role.time}}</text>
										</view>
									</view>
									<view class="money">
										{{role.amount}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<empty v-else/>
			</view>
			<foot />
		</view>
	</page>
</template>

<script>
	import {getAccountDetails} from "../static/api.js"
	export default{
		data(){
			return{
				detailed:[],
				openList:[],
			}
		},
		computed:{
			userInfo() {
				return this.$store.getters.userInfo
			}
		},
		methods:{
			getOpenList(id){
				if(this.openList.length > 0){
					return this.openList.indexOf(id) != -1 
				}else{
					return false
				}
			},
			setOpenList(id){
				if(this.openList.length > 0){
					this.openList.indexOf(id) == -1  ? this.openList.push(id) :  this.openList.splice(this.openList.indexOf(id),1)
				}else{
					this.openList.push(id)
				}
			},
			onWithdrawlist(juesetype){
				uni.navigateTo({
					url:'/pagesMy/myProfit/withdrawlist?juesetype='+juesetype
				})
			},
			async getList(){
				uni.showLoading()
				try{
					var par = [];
					par.juesetype = this.juesetype;
					var res = await getAccountDetails(par)
					this.detailed = res
					if(res && res.list && res.list.length > 0) this.openList.push(res.list[0].id)
					uni.hideLoading()
				}catch{
					uni.hideLoading()
				}
			},
			onRule(){
				uni.navigateTo({
					url:'/pagesMy/decorationGold/rule'
				})
			}
		},
		onLoad(params){
			if(params.juesetype != undefined){
				this.juesetype = params.juesetype;
				console.log(this.juesetype, '角色判断');
				
			}
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.zhangdmx{
		font-size: 13px;
		    color: #36353a;
		    width: 56px;
		    height: 30px;
		    line-height: 30px;
		    text-align: center;
		    border: 1px solid #707070;
		    border-radius: 16px;
	}
	
	.info_box{
		padding: 20rpx 38rpx 70rpx;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.row{
			flex: 1;
			line-height: 50rpx;
			font-weight: 700;
			>text:nth-child(1){
				font-size: 28rpx;
				color:#26252A;
			}
			.money{
				font-size: 32rpx;
				color:$theme;
			}
			
		}
	}
	.list_page{
		min-height: 60vh;
	}
	.list_box{
		box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.02);
		.top_box{
			padding: 30rpx 38rpx 40rpx;
			width: 100%;
			box-sizing: border-box;
			font-size: 24rpx;
			.time{
				line-height: 34rpx;
				margin-bottom: 16rpx;
			}
			image{
				width: 24rpx;
				height: 24rpx;
				margin-left: 16rpx;
				vertical-align: middle;
			}
			.detailed{
				color:#666;
				line-height: 34prx;
			}
		}
		.bottom_box{
			.row_box{
				padding-top: 40rpx;
				padding-left: 34rpx;
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				&:last-child{
					.right{
						border-bottom: 0;
					}
				}
				.left{
					image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
				}
				.right{
					width: calc(100% - 94rpx);
					box-sizing: border-box;
					padding-bottom: 18rpx;
					padding-right: 38rpx;
					border-bottom: 2rpx solid #EBEBEF;
					display: flex;
					justify-content: space-between;
					.info{
						width: calc(100% - 200rpx);
						>view:nth-child(1){
							color:#26252A;
							font-size: 32rpx;
							line-height: 44rpx;
							margin-bottom: 8rpx;
						}
						>view:nth-child(2),>view:nth-child(3){
							color:#ADADAD;
							font-size: 24rpx;
							line-height: 34rpx;
						}
						>view:nth-child(2){
							margin-bottom: 24rpx;
						}
						
					}
					.money{
						color:#26252A;
						font-size: 28rpx;
						font-weight: 700;
					}
				}
			}
		}
	}
</style>
